<template>
	<view class="content">
		<view class="remind_content">
			<view class="remind_content_info">
				<view class="remind_content_info_txt">
					<view class="remind_content_info_txt_text1">签到奖励</view>
					<view class="remind_content_info_txt_text2">连续签到领看币，中断需要重新开始哦~</view>
				</view>
				<view class="remind_content_info_tixingText" @click="clickToTixing">签到提醒</view>
			</view>
			
			<view class="remind_content_list">
				<view class="remind_content_list_box" v-for="(item,index) in dataList" :key="index">
					<view class="remind_content_list_box_isSignInInfo">
						<view v-if="item.isCurrenSignIn" class="remind_content_list_box_isSignInInfo_clickSignIn" @click="clikToSignIn(item, index)">
							<image class="image" src= "/static/images/welfare_signIn.png" mode=""></image>
						</view>
						<view v-else class="remind_content_list_box_isSignInInfo_default">
							<image class="image" v-if="item.status == 1" src= "/static/images/select_s.png" mode=""></image>
							<image class="image" v-else src= "/static/images/select_n.png" mode=""></image>
						</view>
					</view>
					<view class="remind_content_list_box_progress">
						<view ref="progressLeft" class="remind_content_list_box_progress_left">
							<image class="image" v-if="item.status" style="background-color: #F69F54;" ></image>
							<image class="image" v-else style="background-color: #D8D8D8;" ></image>
						</view>
						<view class="remind_content_list_box_progress_right remind_content_list_box_progress_left">
							<image class="image" v-if="item.status && item.isRightColor" style="background-color: #F69F54;" ></image>
							<image class="image" v-else style="background-color: #D8D8D8;" ></image>
						</view>
						<view class="remind_content_list_box_progress_dot">
							<image class="image" v-if="item.status" style="background-color: #F69F54;" ></image>
							<image class="image" v-else style="background-color: #D8D8D8;" ></image>
						</view>
					</view>
					<view class="remind_content_list_box_signInBi">
						<image class="image" v-if="item.status == 1" src= "/static/images/bi_18_s.png" mode=""></image>
						<image class="image" v-else src= "/static/images/bi_18_n.png" mode=""></image>
					</view>
					<view class="remind_content_list_box_coin">
						{{ item.ml_coin }}
					</view>
				</view>
			</view>	
			
			
		</view>
	</view>
</template>

<script>
	import interfaces from '@/utils/interfaces.js'
	import config from '@/utils/config.js'
	import tools from '@/utils/tools.js'
	
	export default {
		data() {
			return {
				is_sign_today: 0,
				dataList:[]
			}
		},
		methods: {
			requestSignInList() {
				let self = this;
				self.request({
					url: interfaces.welfare_signIn_list,
					data:{},
					method:"POST",
					success: (res)=>{
						console.log("获取签到列表",res)
						self.is_sign_today = res.content.is_sign_today
						let contentList = res.content.list
						contentList.forEach((item, index)=> {
							var isRightColor = 0
							var isCurrenSignIn = 0
							if (item.status == 1) {
								isRightColor = 1 
							} else {
								if(index == 0 && contentList[index + 1].status == 0) {
									isCurrenSignIn = 1
								} else if(index > 0 && contentList[index - 1].status == 1) {
									let lastItem = contentList[index - 1]
									lastItem.isRightColor = 0
									isCurrenSignIn = 1
								}
							}
							self.$set(item, "isRightColor", isRightColor)							
							self.$set(item, "isCurrenSignIn", isCurrenSignIn)
						})
						// self.dataList = self.dataList.concat(contentList)		
						self.dataList = contentList
					}
				});
			},
			requestSignIn(signItem, signIndex) {
				let self = this;
				self.request({
					url: interfaces.welfare_signIn,
					data:{},
					method:"POST",
					success: (res)=>{
						// console.log("获取签到数据",res)
						// sign_status int类型 => 签到状态 1 签到成功 0 签到失败
						if (res.content.sign_status === 1) {
							self.is_sign_today = 1
							let successString = '签到成功+'+signItem.ml_coin+'看币'
							uni.showToast({
								title:successString,
								icon:'none',
								duration:3000
							})
							tools.get_user_info_by_serve(self,()=>{})
							self.localChangeSignedInData(signItem,false, signIndex)
							self.requestSignInList()
						} else {
							uni.showModal({
								content: res.message
							})
						}
					}
				});
			},
			// 本地改变已签到数据
			localChangeSignedInData(signItem, signIndex) {
				try {
					let contentList = this.dataList
					contentList.forEach((item, index)=> {
						// console.log("遍历", index)
						if (signIndex === index) {
							item.status = 1
							item.isCurrenSignIn = 0
							if (signIndex > 0) {
								let previousItem = contentList[signIndex - 1]
								previousItem.isRightColor = 1
								if (signIndex == contentList.length - 1) {
									item.isRightColor = 1
								}
							} 
							
							let nextItem = contentList[index + 1]
							nextItem.isCurrenSignIn = 1
							
							this.dataList = contentList
														
							throw Error();
						}
					})
				} catch(err) {
					return false;
				}
			},
			clikToSignIn(signItem, signIndex) {
				console.log(153)
				// console.log("signIndex:", signIndex, "id", signItem.id, "ml_coin", signItem.ml_coin)
				if (this.is_sign_today == 0) {
					this.requestSignIn(signItem, signIndex)
				} else{
					uni.showToast({
						title:"今日已签过到,请明天再来吧",
						icon:'none',
						duration:3000
					})
				}
			},	
			clickToTixing() {
				tools.setup_subscribeMessage()
			}
		},
		mounted() {
			this.requestSignInList()
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		padding: 0 15px;
		margin-bottom: 25px;
		// background-color: red;
		
		// 签到相关
		.remind_content{
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			padding: 15px;
			border-radius: 10px;
			background-color: white;
			
			// 提醒签到
			.remind_content_info{
				display: flex;
				box-sizing: border-box;
				flex-flow: row nowrap;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				
				.remind_content_info_txt{
					display: flex;
					box-sizing: border-box;
					flex-direction: column;
					// 签到奖励
					.remind_content_info_txt_text1{
						font-size: 16px;
						font-weight: 500;
						color: #DF7C28;
					}
					// 签到描述
					.remind_content_info_txt_text2{
						font-size: 12px;
						color: #6C6C6C;
						margin-top: 7px;
					}
				}
				// 签到提醒按钮
				.remind_content_info_tixingText{
					width: 80px;
					height: 30px;
					font-size: 13px;
					color: #ffffff;
					background-color: #F69F54;
					text-align: center;
					line-height: 30px;
					border-radius: 15px;
				}
			}
			
			// 签到横向列表
			.remind_content_list{
				width: 100%;
				display: flex;
				box-sizing: border-box;	
				flex: 1;
				flex-direction: row;
				margin-bottom: 30rpx;
				// background-color: red;
				
				.remind_content_list_box{
					width: 100%;
					// height: 40px;
					display: flex;
					box-sizing: border-box;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					// background-color: green;
						
					.remind_content_list_box_isSignInInfo{
						display: flex;
						box-sizing: border-box;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						height: 80rpx;
						// background-color: red;
					
						.remind_content_list_box_isSignInInfo_default{
							flex-shrink: 0;
							width: 40rpx;
							height: 40rpx;
							margin-top: 40rpx;
							// background-color: palevioletred;
							.image{
								width: 100%;
								height: 100%;
							}
						}
						.remind_content_list_box_isSignInInfo_clickSignIn{
							flex-shrink: 0;
							width: 60rpx;
							height: 80rpx;
							// background-color: purple;
							.image{
								width: 100%;
								height: 100%;
							}
						}
						
					}
					.remind_content_list_box_progress{
						width: 100%;
						height: 20rpx;
						display: flex;
						box-sizing: border-box;
						justify-content: center;
						align-items: center;
						margin: 20rpx 0px;	
					    margin-top: 20rpx;
						.remind_content_list_box_progress_left{
							display: flex;
							width: 50%;
							height: 6rpx;
							justify-content: center;
							align-items: center;
							.image{
								width: 100%;
								height: 100%;								
							}
						}
						.remind_content_list_box_progress_dot{
							position: absolute;
							display: flex;
							width: 20rpx;
							height: 20rpx;
							border-radius: 100%;
							justify-content: center;
							align-items: center;
							.image{
								width: 100%;
								height: 100%;
								border-radius: 100%;
							}
						}
					}
					.remind_content_list_box_signInBi{
						flex-shrink: 0;
						width: 36rpx;
						height: 36rpx;
						.image{
							width: 100%;
							height: 100%;
						}
					}
					.remind_content_list_box_coin {
						display: flex;
						width: 100%;
						height: 40rpx;
						font-size: 15px;
						margin-top: 20rpx;
						justify-content: center;
					}
				}
			}
			
		}		
	}
</style>